﻿import React from 'react';
import ReactDOM from 'react-dom/client';
import img1 from './image/s1.jpg';
import img2 from './image/s2.jpg'
import img3 from './image/s3.jpg'
import SingleComment from "./SingleComment";
import UserCard from "./UserCard";

const App = ()=>{
    return(
        <div className='ui comments'>
            <UserCard>
                <div>
                    Hello my name is Sarah,and i am live in sh;
                </div>
            </UserCard>
            <UserCard>
                <SingleComment
                    name={'jack'}
                    date={'Today at 5:00PM'}
                    text={'it is amazing'}
                    picture={img1}/>
            </UserCard>
            <UserCard>
                <SingleComment
                name= {'Alex'}
                date={'Today at 6:00PM'}
                text={'great job'}
                picture={img2}/>
            </UserCard>
            <UserCard>
                <SingleComment
                    name={'Sarah'}
                    date={'Today at 7:00PM'}
                    text={'thanks...'}
                    picture={img3}/>
            </UserCard>

        </div>
    )
}

const container = document.querySelector('#root');
const root = ReactDOM.createRoot(container);
root.render(<App />);